<!--
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Easy Resume a Personal Category Flat Bootstrap Responsive Website Template | Home :: w3layouts</title> 
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Easy Resume Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template, 
	SmartPhone Compatible web template, free WebDesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- Custom Theme files -->
<link href="css/bootstrap.css" type="text/css" rel="stylesheet" media="all">
<link href="css/style.css" type="text/css" rel="stylesheet" media="all"> 
<link rel="stylesheet" href="css/lightbox.css"> 
<!-- //Custom Theme files -->
<!-- js -->
<script src="js/jquery-2.2.3.min.js"></script> 
<!-- //js -->
<!-- web-fonts -->
<link href='//fonts.googleapis.com/css?family=Text+Me+One' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Roboto+Condensed:400,300,300italic,400italic,700,700italic' rel='stylesheet' type='text/css'>
<!-- //web-fonts --> 
</head>
<body>
	<!-- top-nav -->
	<div class="top-nav">
		<div class="container">
			<div class="navbar-header logo">
				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
					Menu
				</button>
			</div>
			<!-- Collect the nav links, forms, and other content for toggling -->
			<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
				<div class="menu">
					<ul class="nav navbar"> 
						<li><a href="index.html" class="w3ls-hover"><span data-letters="Home">我的</span></a></li>
						<li><a href="#" data-toggle="modal" data-target="#about" class="w3ls-hover"><span data-letters="About">关于 </span></a></li>
						<li><a href="#" data-toggle="modal" data-target="#skill" class="w3ls-hover"><span data-letters="Skills">技能</span></a></li>
						<li><a href="#" data-toggle="modal" data-target="#experience" class="w3ls-hover"><span data-letters="Experience">教育背景 </span></a></li>
						<li><a class="w3ls-icon" href="#"><span class="glyphicon glyphicon-save"></span></a></li> 
					</ul>
					<div class="clearfix"> </div>
				</div>
			</div>
		</div>
	</div>	
	<!-- //top-nav -->
	
	<!-- banner --> 
	<div class="video" data-vide-bg="video/55555">  
		<div class="container">
			<div class="banner-text agileinfo-text">  
				<h1>杨永成</h1> 
				<h6>电子商务师 & 网页设计师</h6>
			</div>  
		</div>	
	</div>	
	<script src="js/jquery.vide.min.js"></script>
	<!-- //banner --> 
	<!-- modal-about -->
	<div class="modal fade modal-about" id="about" tabindex="-1" role="dialog">
		<div class="modal-dialog" role="document">
			<div class="modal-content"> 
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					<h4 class="modal-title">关于我</h4>
				</div>
				<div class="modal-body modal-spa">
					<div class="about"> 
						<div class="col-md-4 about-left ">
							<img src="images/123123.jpg" class="img-responsive" alt=""/>
						</div>
						<div class="col-md-8 about-right wthree">
							<h3>你好，我是 <span>杨永成 </span></h3>
							<h4>电子商务师 & 网页设计师</h4>
							<ul class="address">
								<li>
									<ul class="agileits-address-text ">
										<li><b>出生日期</b></li>
										<li>20-09-1996/li>
									</ul>
								</li>
								<li>
									<ul class="agileits-address-text">
										<li><b>电话 </b></li>
										<li>+86 136 9944 6139</li>
									</ul>
								</li>
								<li>
									<ul class="agileits-address-text">
										<li><b>住址 </b></li>
										<li>四川华新现代职业学院</li>
									</ul>
								</li>
								<li>
									<ul class="agileits-address-text">
										<li><b>邮箱</b></li>
										<li><a href="mailto:example@mail.com"> 392820426@qq.com</a></li>
									</ul>
								</li>
								
							</ul> 
						</div> 
						<div class="clearfix"> </div> 
						
					</div>
				</div> 
			</div>
		</div>
	</div>
	<!-- //modal-about -->
	<!-- modal-skills -->
	<div class="modal fade modal-skills" id="skill" tabindex="-1" role="dialog">
		<div class="modal-dialog" role="document">
			<div class="modal-content"> 
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					<h4 class="modal-title">我的技能</h4>
				</div>
				<div class="modal-body modal-spa">
					<div class="skills"> 
						<div class="col-md-6 bar-grids">
							<h4><span class="glyphicon glyphicon-cog"></span> 技术技能 </h4>
							<h6>计算机  <span> 80% </span></h6>
							<div class="progress">
								<div class="progress-bar progress-bar-striped active" style="width: 80%">
								</div>
							</div>
							<h6>交互设计 & 开发商 <span> 70% </span></h6>
							<div class="progress  w3-agile">
								<div class="progress-bar progress-bar-striped active" style="width: 70%">
								</div>
							</div>
							<h6>办公自动化<span>90% </span></h6>
							<div class="progress  w3-agile">
								<div class="progress-bar progress-bar-striped active" style="width: 90%">
								</div>
							</div>
							<h6>Photoshop <span> 75% </span></h6>
							<div class="progress  w3-agile">
								<div class="progress-bar progress-bar-striped active" style="width: 75%">
								</div>
							</div>
						</div> 
						<div class="col-md-6 bar-grids  w3-agile">
							<h4><span class="glyphicon glyphicon-briefcase"></span> 专业技能 </h4>
							<h6>网店美工<span> 85% </span></h6>
							<div class="progress">
								<div class="progress-bar progress-bar-striped active" style="width: 85%">
								</div>
							</div>
							<h6>网店客服<span> 95% </span></h6>
							<div class="progress">
								<div class="progress-bar progress-bar-striped active" style="width: 95%">
								</div>
							</div>
							<h6>网店推广<span>90% </span></h6>
							<div class="progress">
								<div class="progress-bar progress-bar-striped active" style="width: 90%">
								</div>
							</div>
							<h6>跨境电商<span>86% </span></h6>
							<div class="progress prgs-w3agile-last">
								<div class="progress-bar progress-bar-striped active" style="width: 86%">
								</div>
							</div> 
						</div>
						<div class="clearfix"> </div>	
					</div>
				</div> 
			</div>
		</div>
	</div>
	<!-- //modal-skills -->
	<!-- modal-experience -->
	<div class="modal fade modal-experience" id="experience" tabindex="-1" role="dialog">
		<div class="modal-dialog" role="document">
			<div class="modal-content"> 
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					<h4 class="modal-title">我的经历</h4>
				</div>
				<div class="modal-body modal-spa">
					<div class="experience w3-agileits-info">  
						<div class="experience-grids">
							<div class="experience-left">
								<h3>2016 - Now </h3>
								<h5>学校名称 </h5>
							</div>
							<div class="experience-right">
								<h4>四川华新现代职业学院</h4>
								<p>这三年就读于四川华新现代职业学院，学会了很多专业以及技术技能</p>
							</div>
							<div class="clearfix"> </div>
						</div> 
						<div class="experience-grids experience-grids-btm">
							<div class="experience-left">
								<h3>2013 - 2016</h3>
								<h5>学校名称 </h5>
							</div>
							<div class="experience-right">
								<h4>宜宾县二中</h4>
								<p>这三年就读于宜宾县二中</p>
							</div>
							<div class="clearfix"> </div>
						</div>
						<div class="experience-grids w3-agileits">
							<div class="experience-left">
								<h3>2011 - 2013</h3>
								<h5>学校名称</h5>
							</div>
							<div class="experience-right">
								<h4>私立宜宾育才</h4>
								<p>这三年就读于私立宜宾育才</p>
							</div>
							<div class="clearfix"> </div>
						</div>
					</div>
				</div> 
			</div>
		</div>
	</div>
	<!-- //modal-experience -->
	<!-- modal-education -->
	<div class="modal fade modal-experience" id="education" tabindex="-1" role="dialog">
		<div class="modal-dialog" role="document">
			<div class="modal-content"> 
				<div class="modal-header w3layouts">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					<h4 class="modal-title">My Qualification</h4>
				</div>
				<div class="modal-body modal-spa">
					<div class="experience">  
						<div class="experience-grids">
							<div class="experience-left">
								
							</div>
							<div class="experience-right">
								
							</div>
							<div class="clearfix"> </div>
						</div> 
						<div class="experience-grids experience-grids-btm">
							<div class="experience-left">
								
							</div>
							<div class="experience-right">
								
								
							</div>
							<div class="clearfix"> </div>
						</div> 
					</div>
				</div> 
			</div>
		</div>
	</div>
	<!-- //modal-education -->
	<!-- modal-gallery -->
	<div class="modal fade modal-gallery" id="work" tabindex="-1" role="dialog">
		<div class="modal-dialog" role="document">
			<div class="modal-content"> 
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					<h4 class="modal-title">My Work</h4> 
				</div>
				<div class="modal-body modal-spa">
					<div class="gallery"> 
						<div class="gallery-row"> 
							<div class="col-md-4 gallery-grids">
								<div class="gallery-w3ls-hover">
									<a href="images/g1.jpg" data-lightbox="example-set" data-title="Lorem Ipsum is simply dummy the when an unknown galley">
										<img src="images/g1.jpg" class="img-responsive zoom-img" alt=""/>
										<div class="view-caption">
											<h5>View+</h5> 
										</div>
									</a>
								</div>
							</div>
							<div class="col-md-4 gallery-grids">
								<div class="gallery-w3ls-hover">
									<a href="images/g2.jpg" data-lightbox="example-set" data-title="Sed ut perspiciatis unde omnis iste natus error sit">
										<img src="images/g2.jpg" class="img-responsive zoom-img" alt=""/>
										<div class="view-caption">
											<h5>View+</h5> 
										</div>
									</a>
								</div>
							</div>
							<div class="col-md-4 gallery-grids">
								<div class="gallery-w3ls-hover">
									<a href="images/g3.jpg" data-lightbox="example-set" data-title="Eaque ipsa quae ab illo inventore veritatis et quasi">
										<img src="images/g3.jpg" class="img-responsive zoom-img" alt=""/>
										<div class="view-caption">
											<h5>View+</h5> 
										</div>
									</a>
								</div>
							</div>
							<div class="col-md-4 gallery-grids">
								<div class="gallery-w3ls-hover">
									<a href="images/g4.jpg" data-lightbox="example-set" data-title="Lorem Ipsum is simply dummy the when an unknown galley">
										<img src="images/g4.jpg" class="img-responsive zoom-img" alt=""/>
										<div class="view-caption">
											<h5>View+</h5> 
										</div>
									</a>
								</div>
							</div>
							<div class="col-md-4 gallery-grids">
								<div class="gallery-w3ls-hover">
									<a href="images/g5.jpg" data-lightbox="example-set" data-title="Sed ut perspiciatis unde omnis iste natus error sit">
										<img src="images/g5.jpg" class="img-responsive zoom-img" alt=""/>
										<div class="view-caption">
											<h5>View+</h5> 
										</div>
									</a>
								</div>
							</div>
							<div class="col-md-4 gallery-grids">
								<div class="gallery-w3ls-hover">
									<a href="images/g6.jpg" data-lightbox="example-set" data-title="Lorem Ipsum is simply dummy the when an unknown galley">
										<img src="images/g6.jpg" class="img-responsive zoom-img" alt=""/>
										<div class="view-caption">
											<h5>View+</h5> 
										</div>
									</a>
								</div>
							</div>
							<div class="col-md-4 gallery-grids">
								<div class="gallery-w3ls-hover">
									<a href="images/g3.jpg" data-lightbox="example-set" data-title="Sed ut perspiciatis unde omnis iste natus error sit">
										<img src="images/g3.jpg" class="img-responsive zoom-img" alt=""/>
										<div class="view-caption">
											<h5>View+</h5> 
										</div>
									</a>
								</div>
							</div>
							<div class="col-md-4 gallery-grids">
								<div class="gallery-w3ls-hover">
									<a href="images/g1.jpg" data-lightbox="example-set" data-title="Eaque ipsa quae ab illo inventore veritatis et quasi">
										<img src="images/g1.jpg" class="img-responsive zoom-img" alt=""/>
										<div class="view-caption">
											<h5>View+</h5> 
										</div>
									</a>
								</div>
							</div>
							<div class="col-md-4 gallery-grids">
								<div class="gallery-w3ls-hover">
									<a href="images/g2.jpg" data-lightbox="example-set" data-title="Lorem Ipsum is simply dummy the when an unknown galley">
										<img src="images/g2.jpg" class="img-responsive zoom-img" alt=""/>
										<div class="view-caption">
											<h5>View+</h5> 
										</div>
									</a>
								</div>
							</div>
							<div class="clearfix"> </div>
						</div>
						<!--  light box js -->
						<script src="js/lightbox-plus-jquery.min.js"> </script> 
						<!-- //light box js-->  
					</div>
				</div> 
			</div>
		</div>
	</div>
	<!-- //modal-gallery -->
	<!-- modal-contact -->
	<div class="modal fade modal-contact" id="contact" tabindex="-1" role="dialog">
		<div class="modal-dialog" role="document">
			<div class="modal-content"> 
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					<h4 class="modal-title">Get In Touch</h4>
				</div>
				<div class="modal-body modal-spa">
					<div class="contact"> 
						<div class="contact-w3lsrow">
							<div class="col-md-6 contact-left w3-agileits">
								<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3023.9503398796587!2d-73.9940307!3d40.719109700000004!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25a27e2f24131%3A0x64ffc98d24069f02!2sCANADA!5e0!3m2!1sen!2sin!4v1441710758555" allowfullscreen></iframe>
							</div>
							<div class="col-md-6 contact-right">
								<form action="#" method="post">
									<div class="styled-input agile-styled-input-top">
										<input type="text" name="Name" required="">
										<label>Name</label>
										<span></span>
									</div>
									<div class="styled-input">
										<input type="text" name="Email" required=""> 
										<label>Email</label>
										<span></span>
									</div> 
									<div class="styled-input">
										<input type="text" name="Subject" required="">
										<label>Subject</label>
										<span></span>
									</div>
									<div class="styled-input">
										<textarea name="Message" required=""></textarea>
										<label>Message</label>
										<span></span>
									</div>	 
									<input type="submit" value="SEND">
								</form>
							</div>
							<div class="clearfix"> </div>
						</div>  
					</div>
				</div> 
			</div>
		</div>
	</div>
	<!-- //modal-contact --> 
	
	<!-- footer -->
	<div class="footer">
		<div class="container">
			<p>© 2016 Easy Resume. All rights reserved | Design by <a href="http://w3layouts.com">W3layouts</a></p>
		</div>
	</div>
	<!-- //footer --> 
	
	<!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="js/bootstrap.js"></script>
</body>
</html>